<template>
	<view class="content">
		<view class="device-view">
			<view class="alarm-view-item">
				<view class="alarm-view-item-c">
					<view class="upload-img-title">
						<view>请输入备注：</view>
					</view>
					<view style="margin: 10px 10px 0 10px; background-color: #E7EBF4;">
						<uni-easyinput type="textarea" v-model="form.handleContent"></uni-easyinput>
					</view>
				</view>
			</view>
      <view class="alarm-view-item">
        <view class="alarm-view-item-c">
          <view class="upload-img-title">
            <view>是否结束报警：</view>
          </view>
          <view class="upload-img">
            <uni-data-checkbox :multiple="false" v-model="form.isFinishAlarm" mode="default" :localdata="isFinish"></uni-data-checkbox>
          </view>
        </view>
      </view>
			<view class="alarm-view-item">
				<view class="alarm-view-item-c">
					<view class="upload-img-title">
						<view>请上传图片：</view>
					</view>
					<view class="upload-img">
						<uni-file-picker limit="9" ref="files" :auto-upload="false"></uni-file-picker>
					</view>
				</view>
			</view>
		</view>
		<button class="add-btn" @click="submit">提交</button>
	</view>
</template>

<script>
	import baseUrl from '../../../config/baseUrl.js'
	import { addHandleRecord } from '../../../api/alarm.js'
	import { mapGetters	} from 'vuex'
	export default {
		data() {
			return {
				id: '',
				form: { handleContent:'' },
				formData: {},
        isFinish:[{ 'code':0,'codeDesc':'不结束' },{ 'code':1,'codeDesc':'结束' }],
			}
		},
		onLoad(options) {
			if (options.id != null) {
				// 查看
				uni.getStorage({
					key: 'detail',
					success: res => {
						this.formData = res.data
					}
				})
			}
		},
		computed: { ...mapGetters({ userInfo: 'userInfo' }) },
		methods: {
			 uploadPic(){
			 	let pics = []
			 	let token = this.userInfo.token
			 	let length = this.$refs.files.files.length
			 	let count = 0 
			 	return new Promise((resolve, reject)=>{
			 		this.$refs.files.files.forEach(function(item, index) {						
			 			let n = uni.uploadFile({
			 			    url: baseUrl.baseUrl +'/public/uploadAttachmentFile',
			 				header: { 'token': token },
			 			    filePath: item.url,
			 			    name: 'file',
			 			    success: uploadFileRes => {
			 					let json = JSON.parse(uploadFileRes.data)
                pics.push({
                  name:item.name,
                  url:json.data
                })
			 					count++
			 					if(count == length){
			 						resolve(pics)
			 					}
			 			    }
			 			})
			 		})
			 		
			 	})
			 },
			//提交
			async submit() {
				if(this.form.handleContent == ''){
					uni.showToast({
						title: '请输入备注',
						duration: 1000,
						icon: 'none'
					})
					return false
				}
				this.form.businessId = this.formData.id
				this.form.devname = this.formData.devname
				this.form.devbm = this.formData.devbm
				this.form.businessType = 7 //破坏性人类行为预警指标
				if (this.$refs.files.files.length > 0) {
					let roadDiseaseSporPics = await this.uploadPic()
					this.form.gatherPics = JSON.stringify(roadDiseaseSporPics)
				}
        addHandleRecord(this.form).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '处理成功！',
							duration: 2000
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} 
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tag-class {
		float: left;
		margin: 10px 5px 0px 0px;
		width: 20%;
		height: 10%;
		line-height: 50rpx;
		border: 2rpx solid #E6E6E6;
		text-align: center;
		border-radius: 13px;
		display: flex;
		justify-content: center; //左右居中
		align-items: center; //上下居中

		font-size: 12px;
		color: #666;
	}

	.xuan {
		color: #046AFB !important;
		border: 2rpx solid #046AFB;
	}

	page {
		background: #F2F6FF;
		padding-top: 16upx;
	}

	.device-view {
		display: flex;
		flex-wrap: wrap;
		margin: auto;
		width: 95%;
		margin: auto;
		text-align: center;
		margin-bottom: 20px;

		.alarm-view-item {
			padding: 10px;
			background-color: #FFFFFF;
			width: 97%;
			height: auto;
			margin-left: 1.5%;
			margin-top: 10px;

			.alarm-view-item-t {
				display: flex;
				justify-content: space-between;
				padding-bottom: 5px;
				// border-bottom: 1px solid rgba($color: #409eff, $alpha: 0.5);
			}

			.alarm-view-item-c {
				.item-c-i-t {
					margin-top: 10px;
				}

				.item-c-bm-t {
					display: flex;
					margin-left: 15px;
					margin-bottom: 20px;
					justify-content: space-between;
					align-items: center;
					color: #333333;
					font-size: 28upx;
				}

				.upload-img-title {
					display: flex;
					margin-left: 10px;
					color: #333333;
					font-size: 28upx;
				}

				.upload-img {
					background-color: #FFFFFF;
					padding: 10px 10px 0 10px;
				}

			}
		}
	}

	.bot-row {
		padding: 5px;
		display: flex;
		align-items: center;
		font-size: 28upx;
		ine-height: 28px;

		.text1 {
			flex: 1;
			color: #333333;
			display: flex;
			margin-left: 10px;
			justify-content: left;
		}

		.text2 {
			flex: 1;
			color: #333333;
			display: flex;
			margin-right: 10px;
			justify-content: right;
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(100% - 20px);
		// height: 80upx;
		margin: 60upx auto;
		color: #fff;
		background-color: #046AFB;
		border-radius: 5px;
		font-size: 14px;
		// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>
